import React from 'react';
import {injectIntl} from './intl';
import PropTypes from 'prop-types';
import {Card, Button, Form, Row, Col, Spin, message} from 'antd';
import {FORM_BIG_OPTIONS, PAGE} from '../constants';
import TextInput from 'Shared/components/TextInput';
const FormItem = Form.Item;
import routes from './routes';
import styles from './style.css';
import CommonDetail from './CommonDetail';
const autosize = {min: 1};
export class ConfirmPI extends React.PureComponent {
    state = {
        loading: false,
        reportComment: '',
        isValidate: false,
        isConfirm: true
    };

    componentDidMount() {
        this.props.init();
        this.ismounted = true;
    }

    componentWillUnmount() {
        this.ismounted = false;
        this.props.onUmount();
    }
    handleFilterChange = (value, name) => {
        if(!this.state.hasOperat)
            this.setState({
                hasOperat: true
            });
        this.props.onConditionsChange(name, value);
    };
    // 通过
    submit = () => {
        this.setState({loading: true});
        return this.props.onClickConfirmPI().then(success => {
            if(this.ismounted && !success)
                this.setState({
                    loading: false
                });
        });
    }
    // 驳回
    notConfirm = () => {
        if(this.props.conditions.reportComment === undefined || this.props.conditions.reportComment === null) {
            this.setState({isValidate: true});
            return message.warn(this.props.intl.formatMessage({
                id: 'confirmPI.submit.validate',
                defaultMessage: '确认意见不能为空'
            }));
        }
        this.setState({loading: true});
        return this.props.onClickNoConfirmPI().then(success => {
            if(this.ismounted && !success)
                this.setState({
                    loading: false
                });
        });
    }
    
    render() {
        return (
            <div className={styles.detail}>
                <Spin spinning={this.props.loading || this.state.loading}>
                    <CommonDetail
                        detail={this.props.detail}
                        showBrand={this.props.showBrand}
                        isDealerUser={this.props.isDealerUser}
                        isMoneyVisible={this.props.isMoneyVisible}
                        isDetail={true} />
                    <Form className="form-standard">
                        <Card
                            className={styles.marginBottom}
                            title={this.props.intl.formatMessage({
                                id: 'confirmPI.card.title',
                                defaultMessage: '确认信息'
                            })}>
                            <Row>
                                <Col {...FORM_BIG_OPTIONS.col}>
                                    <FormItem label={this.props.intl.formatMessage({
                                        id: 'confirmPI.form.panel',
                                        defaultMessage: '确认意见'
                                    })} {...FORM_BIG_OPTIONS.item}
                                    validateStatus={this.state.isValidate && !this.state.reportComment ? 'error' : null}>
                                        <TextInput type="textarea" id="reportComment" autosize={autosize}
                                            value={this.state.reportComment} onBlur={this.handleFilterChange} />
                                    </FormItem>
                                </Col>
                            </Row>
                        </Card>
                    </Form>
                </Spin>
                <div className="page-toolbar">
                    <Button type="primary" disabled={this.props.loading} onClick={this.props.onCancel}>
                        {this.props.intl.formatMessage({
                            id: 'confirmPI.btn.retrun',
                            defaultMessage: '返回'
                        })}
                    </Button>
                </div>
                <Card type="inner">
                    <Row>
                        <Col className="col-align-right">
                            <Button key="notConfirm" loading={this.state.loading}
                                onClick={this.notConfirm}>{this.props.intl.formatMessage({
                                    id: 'isConfirm.btn.notConfirm',
                                    defaultMessage: '驳回'
                                })}</Button>
                            <Button key="isConfirm" loading={this.state.loading}
                                onClick={this.submit} type="primary">{this.props.intl.formatMessage({
                                    id: 'isConfirm.btn.submit',
                                    defaultMessage: '通过'
                                })}</Button>
                        </Col>
                    </Row>
                </Card>
            </div>
        );
    }
}
ConfirmPI.propTypes = {
    conditions: PropTypes.object.isRequired,
    detail: PropTypes.object.isRequired,
    id: PropTypes.string.isRequired,
    init: PropTypes.func.isRequired,
    isDealerUser: PropTypes.bool.isRequired,
    loading: PropTypes.bool.isRequired,
    permissions: PropTypes.array.isRequired,
    onCancel: PropTypes.func.isRequired,
    onClickConfirmPI: PropTypes.func.isRequired,
    onClickNoConfirmPI: PropTypes.func.isRequired,
    onUmount: PropTypes.func.isRequired,
    intl: PropTypes.object,
    isMoneyVisible: PropTypes.bool,
    showBrand: PropTypes.bool
};
import {connect} from 'react-redux';
import {
    getDetail,
    clearData,
    tableSearch,
    onClickConfirmPI,
    onClickNoConfirmPI,
    saveSubmitCondition
} from './actions';
import selectorFactory from 'Shared/utils/immutableToJsSelectorFactory';
const getSubmitData = selectorFactory(['page', 'appState', 'submitData']);
const getPermissions = selectorFactory(['page', 'domainData', 'permission', 'data']);
const getDetailData = selectorFactory(['page', 'domainData', 'detail', 'data']);

const mapStateToProps = (state, ownProps) => ({
    id: ownProps.id,
    loading: state.getIn(['page', 'domainData', 'detail', 'isFetching']) || state.getIn(['page', 'domainData', 'initData', 'isFetching']),
    isDealerUser: state.getIn(['page', 'domainData', 'initData', 'isDealerUser']),
    conditions: getSubmitData(state),
    detail: getDetailData(state),
    showBrand: state.getIn(['page', 'domainData', 'brands', 'data']).size > 1,
    permissions: getPermissions(state),
    isMoneyVisible: state.getIn((['page', 'domainData', 'initData', 'isMoneyVisible'])),
});

const mapDispatchToProps = (dispatch, ownProps) => ({
    init: () => dispatch(getDetail(ownProps.id)),
    onCancel: () => {
        ownProps.history.push(routes.query.url());
    },
    onClickConfirmPI: data => dispatch(onClickConfirmPI(ownProps.id, data)).then(success => {
        if(success) {
            dispatch(tableSearch({
                pageIndex: PAGE.index
            }));
            ownProps.history.push(routes.query.url());
        }
        return success;
    }),
    onClickNoConfirmPI: data => dispatch(onClickNoConfirmPI(ownProps.id, data)).then(success => {
        if(success) {
            dispatch(tableSearch({
                pageIndex: PAGE.index
            }));
            ownProps.history.push(routes.query.url());
        }
        return success;
    }),
    onUmount: () => dispatch(clearData()),
    onConditionsChange: (name, value) => dispatch(saveSubmitCondition(name, value)),
});

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(injectIntl(ConfirmPI));
